<template>
	<om-page :title="pageTitle">
		<view class="exam-list">
			<view class="exam-list">
				<uni-list>
					<view v-for="(item, index) in dataList" :key="index" class="item" style="display: flex;">
						<view style="flex:auto">
							<uni-list-item
								:title="item.examTitle"
								:avatar="index + 1"
								:avatarBgColor="calcBgColor(item)"
								:showArrow="false"
							>
							<view slot="note">
								<view>考试类型：{{item.examTypeName}}</view>
								<view>题目分类：{{item.questionCategoryNameStr}}</view>
								<view>考试总分：{{item.totalScore}}</view>
								<view>及格分数：{{item.passScore}}</view>
								<view>开始时间：{{item.examStartTime}}</view>
								<view>结束时间：{{item.examEndTime}}</view>
							</view>
							</uni-list-item>
						</view>
						<view class="rbtn"><a class='radius light bg-blue zbbtn' @click.stop="getoLink(item)">参与考试</a></view>
					</view>
				</uni-list>
				<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
			</view>
		</view>
	</om-page>
</template>

<script>
	import {mapState} from 'pinia';
	import { useLoginUserStore } from '@/stores/login-user.js'
	const app = getApp();
	export default {
		data() {
			return {
				pageTitle:"考试列表",
				dataList:[],
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
			}	
		},
		computed: {
			...mapState(useLoginUserStore, ['userId', 'userName'])
		},
		methods: {
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLink(item){
				let _that = this;
				_that.om.request('exam/verifyExamStart', {
					examId: item.id
				},'post').then(res => {
					if(!res){
						_that.om.request('videoRecord/videoCheck.do', {
							id: item.id
						},'post').then(zres => {
							if (zres.succeed) {
								if(zres.value.flag){
									uni.navigateTo({
										url: "/pages/mine/exam/exam?id="+item.id
									})
								}else{
									_that.om.toast("请先完成视频'"+zres.value.videoNameStr+"'的学习");
								}
							}else{
								_that.om.toast(zres.msg);
							}
						});
					}

					if (!res.succeed) {
						_that.om.toast(res.msg);
					}
				});
			},
			getDataList(){
				let _that = this;
				_that.om.request('exam/getMobileExamByAuth', {
					page: _that.pageNum,
					rows: _that.pageSize
				},'post').then(res => {
					_that.dataList = _that.dataList.concat(res.rows)
					_that.pageTotal = res.totalPage
				});
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pageNum = 1;
			this.dataList = [];
			this.getDataList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.zbbtn{
		text-align: center;
		width: 64px;
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		display: block;
	}
	.rbtn{
		position: relative;
		flex:none;
		padding: 12px 15px 0 0;
		border-bottom: 1px solid #EEEEEE;
	}
</style>